/**
 * Created by Administrator on 2017/3/21.
 */
import React, { Component, Fragment } from 'react';
import { Form, Button, Badge, Select, Switch, DatePicker, Descriptions, Tag, Modal ,message} from 'antd';
import {connect} from 'dva';
import ReactDataGrid from 'react-data-grid';
import BuildModalTitle from '@/components/BuildModalTitle';
import AddOrEditVendor from './AddOrEditVendor';
import {  afterCloseModal } from '@/utils/utils';
import request from '@/utils/request';
import AddOrEditDevice from './AddOrEditDevice';
const { confirm } = Modal;
const ButtonGroup = Button.Group;
class AddPoliciesForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showCustom: false,
      data:[],
      editRecord:{}
    };
  }

  componentDidMount() {
   this.fetch()
  }
  fetch=()=>{
    const that=this;
    request(`/vendors`,{
      method:'GET',
      params:{
        page:1,
        per_page:50
      }
    }).then((response)=>{
      if(response.status===200){
        that.setState({
          data:response.data.data
        })
      }

    });
  }
  handleAdd=()=>{
    const that=this;
    const formValues = this.AddForm.props.form.getFieldsValue();
    console.log('formValues', formValues);
    request(`/vendors`,{
      method:'POST',
      data:formValues
    }).then((response)=>{
      if(response.status===200){
        that.fetch()
        that.setState({
          addModal:false
        })
        message.success('添加成功')
      }
    });
  }
  handleEdit=()=>{
    const that=this;
    const formValues = this.EditForm.props.form.getFieldsValue();
    console.log('formValues', formValues);
    request(`/vendors/${this.state.editRecord.id}`,{
      method:'PUT',
      data:formValues
    }).then((response)=>{
      if(response.status===200){
        that.fetch()
        that.setState({
          editModal:false
        })
        message.success('修改成功')
      }
    });
  }
  handleDelete=(id)=>{
    const that=this;
    request(`/vendors/${id}`,{
      method:'DELETE',
    }).then((response)=>{
      if(response.status===200){
        that.fetch()
        message.success('删除成功')
      }
    });
  }
  render() {
    const defaultColumnProperties = {
      resizable: true,
    };
    const that=this;
    const columns = [
      {
        name: '厂商名称',
        width: 100,
        key: 'name',
      },
      {
        name: '客户代码',
        width: 100,
        key: 'client_code',
      },
      {
        name: '联系人',
        key: 'contact_person',
        width: 100,
      },
      {
        name: '联系人电话',
        key: 'contact_number',
        width: 100,
      },
      {
        name: '创建时间',
        key: 'created_at',
        width: 150,
      },
      {
        name: '操作',
        width: 200,
        key: 'right',
        classname:'operate',
        formatter: (event) => <Fragment>
            <Button
              type="primary"
              size="small"
              icon="edit"
              onClick={(e) => {
                e.stopPropagation();
                this.setState({
                  editRecord: event.row,
                  editModal: true,
                });
              }
              }
            >编辑
            </Button>
            <Button
              type="danger"
              size="small"
              icon="delete"
              onClick={(e) => {
                e.stopPropagation();
                confirm({
                  title: `确定要删除"${event.row.name}"吗?`,
                  content: '请谨慎操作！',
                  okText: '确定',
                  okType: 'danger',
                  cancelText: '取消',
                  centered:true,
                  maskClosable: true,
                  onOk() {
                    that.handleDelete(event.row.id);
                  },
                  onCancel() {
                    console.log('Cancel');
                  },
                });
              }
              }
            >删除
            </Button>
        </Fragment>,
      },
    ].map(c => ({  ...defaultColumnProperties,...c }));

    return (
      <div>
        <div>
          <Button type="primary" block style={{marginBottom:'10px'}} onClick={()=>{
            this.setState({
              addModal:true
            })
          }}>
            添加水表厂商
          </Button>
          <ReactDataGrid
            columns={columns}
            rowGetter={i => this.state.data[i]}
            rowsCount={this.state.data.length}
            minHeight={(this.state.data.length+1)*35+12}

          />
        </div>
        <Modal
          title={<BuildModalTitle visible={this.state.addModal} modalClass="addModal" title="添加水表厂商"/>}
          visible={this.state.addModal}
          centered
          onOk={this.handleAdd}
          className="addModal"
          onCancel={() => {
            this.setState({ addModal: false });
          }}

        >
          <AddOrEditVendor  wrappedComponentRef={(inst) => this.AddForm = inst}  />

        </Modal>
        <Modal
          title={<BuildModalTitle visible={this.state.editModal} modalClass="editModal"
                                  title={`修改 : ${this.state.editRecord.name}`}/>}
          destroyOnClose
          visible={this.state.editModal}
          centered
          onOk={this.handleEdit}
          className="editModal"
          afterClose={() => {
            afterCloseModal(); // destroyOnClose需要
          }}
          onCancel={() => {
            this.setState({ editModal: false, editRecord: {} });
          }}

        >
          <AddOrEditVendor
            editRecord={this.state.editRecord}
            wrappedComponentRef={(inst) => this.EditForm = inst}
          />

        </Modal>
      </div>
    );
  }
}

const AddPoliciesFormWrap = Form.create()(AddPoliciesForm);
export default connect()(AddPoliciesFormWrap);


